<template>
  <div>
    <div
      class="question-item"
      v-for="(item, idx) in testSubjectVO"
      :key="item.id"
    >
      <!-- 题干 -->
      <div class="question-title" :id="'anchor' + item.id">
        <el-row :gutter="20">
          <el-col :span="21">
            <div ref="blankArea" v-if="item.testSubjects.type == 4">
              {{ idx + 1 }}、
              <span
                class="option-item"
                v-html="completion(item.testSubjects.title, item)"
              ></span>
            </div>
            <p v-else>
              {{ idx + 1 }}、
              <span class="option-item" v-html="item.testSubjects.title"></span>
            </p>
          </el-col>
          <el-col :span="3">
            <div class="collect">
              <span v-if="item.hasOwnProperty('score')" class="collect-score"
                >{{ toFixeds(item.score) }}分</span
              >
              <el-button
                type="text"
                icon="el-icon-collection-tag"
                @click="handleCollect(item)"
                style="
                  float: right;
                  width: 77px;
                  text-align: left;
                  padding: 8px 0;
                "
                >{{ isCollect(item) ? '取消收藏' : '收藏' }}</el-button
              >
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 单选题/多选题 -->
      <div v-if="item.testSubjects.type == 1 || item.testSubjects.type == 2">
        <p
          v-for="option in item.testSubjects.subjectOptionsVOList"
          :key="option.tag"
        >
          {{ option.tag }}：
          <span class="option-item" v-html="option.contents"></span>
        </p>
      </div>
      <!-- 判断题 -->
      <div v-if="item.testSubjects.type == 3">
        <p>正确</p>
        <p>错误</p>
      </div>
      <!-- 问答题 -->
      <div v-if="item.testSubjects.type == 5">
        <el-input
          type="textarea"
          v-model="answer"
          placeholder="请输入内容"
          disabled
        ></el-input>
      </div>
      <div class="answer-wrap">
        <el-row>
          <el-col :span="22">
            <b>考生答案：</b>
            <span :class="isRightClass(item)">{{
              showStudentAnswer(item, 1)
            }}</span>
          </el-col>
          <el-col :span="2">
            <div v-if="item.hasOwnProperty('score')">
              <b>得分：</b>
              <!-- <span :class="isRightClass(item)">{{ showScore(item) }} 分</span> -->
              <span :class="isRightClass(item)" v-if="type == 'read'" @click="handleScore(item)" style="cursor: pointer" title="点击修改分数">{{ showScore(item) }} 分</span>
              <span :class="isRightClass(item)" v-else>{{ showScore(item) }} 分</span>
            </div>
          </el-col>
          <el-col :span="24">
            <b>参考答案：</b>{{ showStudentAnswer(item, 2) }}
          </el-col>
          <el-col :span="24">
            <b>答案解析：</b><span v-html="showSubAnalysis(item)"></span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      answer: '',
      answer1: {},
      answer2: {},
    }
  },
  props: ['testSubjectVO', 'answered', 'collected', "type"],
  computed: {
    showAnswer() {
      return (item) => {
        let answer = this.answered.filter((v) => v.id == item.id)
        return answer.length ? answer[0] : {}
      }
    },
    showScore() {
      return (item) => {
        return this.showAnswer(item).score || 0
      }
    },
    isCollect() {
      return (item) => {
        let collectRes = this.collected.filter((v) => v.id == item.id)
        if (!collectRes.length) return false
        return collectRes[0].isExists == 'Y'
      }
    },
    showStudentAnswer() {
      return (item, flag) => {
        let type = item.testSubjects.type
        let { answer, standardAnswer } = this.showAnswer(item)
        let data = flag == 1 ? answer : standardAnswer
        if (!data || !data.length) return flag == 1 ? '暂未作答' : '暂无'
        if (type == 2) {
          if (typeof data == 'string') {
            data = JSON.parse(data)
          }
          return data.join(' ')
        } else if (type == 3) {
          return data == 1 ? '正确' : '错误'
        } else if (type == 4) {
          let space = ''
          if (typeof data == 'string') {
            data = JSON.parse(data)
          }
          data.forEach((v) => {
            space += `空格${v.key}： ${v.value}  `
          })
          return space
        } else {
          return data
        }
      }
    },
    //显示解析
    showSubAnalysis() {
      return (item) => {
        return (
          this.answered.filter((v) => v.id == item.id)[0].subAnalysis || '暂无'
        )
      }
    },
    isRightClass() {
      return (item) => {
        let { isRight } = this.answered.filter((v) => v.id == item.id)[0]
        return isRight == 'Y' ? 'color-success' : 'color-danger'
      }
    },
  },
  methods: {
    //填空题题干解析
    completion(v, item) {
      let blankNum = []
      let res = v.match(/\[.*?\]/g)
      res.forEach((m) => {
        let num = m.match(/\d+/g)[0]
        blankNum.push(num)
        let dom = `
        <input
          class="blankArea blankArea-${item.id}-${num}"
          value="空格 ${num}"
          readonly
          data-id="${item.id}"
          data-type="${item.testSubjects.type}"
          data-score="${item.score}"
          type="text">`
        v = v.replace(m, dom)
      })
      return v
    },
    async handleCollect(item) {
      if (this.isCollect(item)) {
        //取消收藏
        await this.$store.dispatch('delTestSubjectsErrorBySubjectsId', item)
        await this.$bus.$emit('queryCollectStatus')
        this.successMsg('操作成功')
      } else {
        let myAnswer = this.showStudentAnswer(item, 1)
        this.$bus.$emit('showDialogTestErrorClassify', item, myAnswer)
      }
    },
    //手动改分
    handleScore(item) {
        this.$bus.$emit("writeScore", item);
    },
  },
}
</script>
<style scoped lang="scss">
.question-item {
  padding: 10px;
  margin: 10px 0;
  border: 1px dashed #eee;
  border-radius: 6px;
  .collect {
    .collect-score {
      color: #999;
      margin: 0 10px;
    }
  }
}
.answer-wrap {
  padding-left: 10px;
  background: #fafafa;
}
.option-item {
  ::v-deep p {
    display: inline !important;
  }
  ::v-deep .blankArea {
    width: 100px;
    margin: 0 5px;
    border: 0 none;
    border-bottom: 1px solid #333;
    outline: none;
  }
}
</style>